<template>
  <a-card :bordered="false">
    <a-spin :spinning="isLoading">
      <div class="card-title">操作记录</div>
      <div class="table-operator">
        <a-row>
          <a-col :span="6">
            <a-button v-action:add type="primary" icon="plus" @click="handleAdd">添加操作</a-button>
          </a-col>
        </a-row>
      </div>
      <!-- 列表内容 -->
      <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
        <div class="ant-table-content">
          <div class="ant-table-body">
            <table>
              <thead class="ant-table-thead">
                <tr>
                  <th v-for="(item, index) in columns" :key="index">
                    <span class="ant-table-header-column">
                      <div>
                        <span class="ant-table-column-title">{{ item.title }}</span>
                      </div>
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                <template v-for="item in orderList.data">
                  <tr class="order-empty" :key="`order_${item.id}_1`">
                    <td colspan="8"></td>
                  </tr>
                  <tr :key="`order_${item.id}_2`">
                    <td colspan="8">
                      <span class="mr-20">ID: {{item.id}}</span>
                      <span class="mr-20 booking-arena">{{item.fragments[0].arena}}</span>
                      <span class="mr-20 booking-date">{{ item.start_date }} ~ {{item.end_date}}</span>
                      <span class="mr-20">最少选择：{{ item.fragments[0].minimum }}</span>
                      <span class="mr-20">最多选择：{{ item.fragments[0].maximum}}</span>
                    </td>
                  </tr>
                  <tr v-for="(fragment, fragmentIndex) in item.fragments" :key="`orderGoods_${item.id}_${fragmentIndex}`">
                    <td>
                      <ArenaItem :data="fragment" />
                    </td>
                    <td>
                      <p>￥{{ fragment.price }}</p>
                    </td>
                    <td>
                      <p :class="[fragment.status === 1 ? 'status-close': '']">{{getStatusText(fragment.status)}}</p>
                    </td>
                     <td width="120px">
                      <p>{{fragment.continuity}}</p>
                    </td>
                    <template v-if="fragmentIndex === 0">
                      <td :rowspan="item.fragments.length">
                        {{ item.user_id.real_name }}
                      </td>
                      <td :rowspan="item.fragments.length">
                        {{item.remark}}
                      </td>
                      <td :rowspan="item.fragments.length">
                        {{item.create_time}}
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
          <!-- 空状态 -->
          <a-empty v-if="!orderList.data.length" :image="simpleImage" />
        </div>
      </div>
      <!-- 分页器 -->
      <div v-if="orderList.data.length" class="pagination">
        <a-pagination :current="page" :pageSize="orderList.per_page" :total="orderList.total" @change="onChangePage" />
      </div>
    </a-spin>
    <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
  </a-card>
</template>

<script>
// TODO: 补充编辑、删除功能
import { Empty } from 'ant-design-vue'
import { assignment } from '@/utils/util'
import ArenaItem from './module/ArenaItem'
import AddForm from './operate/AddForm.vue'
import * as BookingApi from '@/api/arena/booking'

// 表格字段
const columns = [
  {
    title: '场地信息',
    align: 'center',
    dataIndex: 'goods',
    scopedSlots: { customRender: 'goods' },
  },
  {
    title: '价格',
    align: 'center',
    dataIndex: 'price',
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '场次状态',
    align: 'center',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '连续选择限制',
    align: 'center',
    dataIndex: 'continuity',
    scopedSlots: { customRender: 'continuity' },
  },
  {
    title: '管理员',
    dataIndex: 'user',
    scopedSlots: { customRender: 'user' },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' },
  },
  {
    title: '操作时间',
    dataIndex: 'create_time',
    scopedSlots: { customRender: 'create_time' },
  },
]

export default {
  name: 'Operate',
  components: {
    ArenaItem,
    AddForm
  },
  data() {
    return {
      // 当前表单元素
      bookingForm: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      // 表格字段
      columns,
      // 当前页码
      page: 1,
      // 列表数据
      orderList: { data: [], total: 0, per_page: 10 },
      // 状态
      statusList: ['开放', '关闭']
    }
  },
  computed: {
    getStatusText() {
      return status => this.statusList[status]
    }
  },

  beforeCreate() {
    // 批量给当前实例赋值
    assignment(this, {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    })
  },
  created() {
    // 初始化页面
    this.init()
  },
  methods: {
    // 初始化页面
    init() {
      this.handleRefresh(true)
    },

    // 获取当前标签
    getDataType() {
      return this.$route.path.split('/')[3]
    },

    // 获取列表数据
    getList() {
      this.isLoading = true
       BookingApi.operateList({page: this.page})
        .then((result) => {
          console.log('list: ', result)
          this.orderList = result.data.list
        })
        .finally(() => {
          this.isLoading = false
        })
        
      this.isLoading = false
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      bool && (this.page = 1)
      this.getList()
    },

    // 翻页事件
    onChangePage(current) {
      this.page = current
      this.handleRefresh()
    },

    // 添加操作
    handleAdd() {
      this.$refs.AddForm.add()
    }
  },
}
</script>
<style lang="less" scoped>
// 分页器
.pagination {
  margin-top: 16px;
  .ant-pagination {
    float: right;
  }
}

.ant-table {
  table {
    border: none;
    border-collapse: collapse;
  }
  .ant-table-thead > tr {
    border: 1px solid #e8e8e8;
  }
  tr.order-empty {
    height: 32px;
    border: 1px solid #fff;
    td {
      padding: 0;
      border-right: none;
      border-left: none;
      background: none !important;
    }
  }
}

.ant-table-thead > tr > th {
  border-right: none;
  border-bottom: none;
  padding: 12px 12px;
  font-weight: bold;
}
.ant-table-tbody > tr > td {
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  padding: 12px 12px;
  // text-align: center;
  .booking-arena{
    font-weight: 700;
    color: #1890ff;
  }

  .booking-date{
    font-weight: 600;
    color: #1890ff;
  }

  .status-close{
    color: #ff7875;
  }
}
</style>
